@extends('layout.master')

@section('title','广告列表')

@section('css')
    @parent
    <!-- Daterange picker plugins css -->
    <link href="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
    <style>
        .floating-labels .radioInput label {
            position: static;
        }

    </style>
@endsection
@section('main')

    <!-- form itself -->
    <form id="add-ad" class="mfp-hide white-popup-block floating-labels ad-add" enctype="multipart/form-data"
          method="post">
        <h4>添加广告</h4>
        <hr>
        <div class="form-group m-b-40 m-t-10">
            <div class="form-group m-b-40 m-t-10">
                <input type="text" class="form-control" id="title" name="title"
                       required><span
                        class="highlight"></span> <span class="bar"></span>
                <label for="title">广告标题</label>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <h5 class="m-t-30 m-b-10">所属公司</h5>
                <select class="selectpicker" data-style="form-control" id="company-id" name="company_id">
                    @foreach(App\AdCompanies::select('id', 'name')->where('status', App\AdCompanies::STATUS_ON)->get() as $value)
                        <option value="{{ $value->id }}">{{ $value->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <h5 class="m-t-30 m-b-10">广告类型</h5>
                <select class="selectpicker" data-style="form-control" id="type" name="type">
                    @foreach(App\AdList::$TypeDisplay as $key => $value)
                        <option value="{{ $key }}">{{ $value }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <h5 class="m-t-30">科室</h5>
                <select class="selectpicker" multiple data-style="form-control" id="department" name="department">
                    @foreach(\App\Keshi::select('id', 'title')->get() as $value)
                        <option value="{{ $value->id }}">{{ $value->title }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group m-b-40 m-t-10">

                <div class="form-group ">
                    <input type="file" id="image" class="dropify" name="image" data-default-file=""
                           data-height="200px"/>
                </div>
                <label for="image">展示图</label>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <input type="text" class="form-control" id="url-link" name="url_link"><span
                        class="highlight"></span> <span class="bar"></span>
                <label for="url-link">广告链接</label>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <input type="text" class="form-control" id="design-cost" name="design_cost" required><span
                        class="highlight"></span> <span class="bar"></span>
                <label for="design-cost">定制费用（元）</label>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <input type="text" class="form-control" id="time-cost" name="time_cost" required><span
                        class="highlight"></span> <span class="bar"></span>
                <label for="time-cost">每次点击收费（元）</label>
            </div>
            <div class="form-group m-b-40 m-t-10">
                <p>备注</p>
                <textarea id="explain" name="explain" cols="80" rows="5"></textarea>
            </div>
        </div>
        <div class="form-actions">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn btn-success"><i
                                        class="fa fa-check"></i> 添加
                                {!! csrf_field() !!}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="modal fade ad-edit" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel1">广告修改</h4>
                </div>
                <div class="modal-body">
                    <form class="floating-labels ad-edit">
                        <input id="id-edit" name="id" type="hidden" value="">
                        <fieldset style="border:0;">

                            <div class="form-group m-b-40 m-t-10">
                                <div class="form-group m-b-40 m-t-10">
                                    <input type="text" class="form-control" id="title-edit" name="title"
                                           required><span
                                            class="highlight"></span> <span class="bar"></span>
                                    <label for="title-edit">广告标题</label>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <h5 class="m-t-30 m-b-10">所属公司</h5>
                                    <select class="form-control" style="height: 38px" required id="company-id-edit"
                                            name="company_id"><span
                                                class="highlight"></span><span class="bar"></span>
                                        @foreach(App\AdCompanies::select('id', 'name')->where('status', App\AdCompanies::STATUS_ON)->get() as $value)
                                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <h5 class="m-t-30 m-b-10">广告类型</h5>
                                    <select class="form-control" id="type-edit" name="type" style="height: 38px"
                                            required><span
                                                class="highlight"></span><span class="bar"></span>
                                        @foreach(App\AdList::$TypeDisplay as $key => $value)
                                            <option id="type-{{ $key }}"
                                                    value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <h5 class="m-t-30">科室</h5>
                                    <div class="input-group">
                                        <ul class="icheck-list">
                                            @foreach(\App\Keshi::select('id', 'title')->get() as $value)
                                                <li>
                                                    <input type="checkbox" class="check departments"
                                                           id="department-{{ $value->id }}" value="{{ $value->id }}"
                                                           name="departments[]">{{ $value->title }}
                                                    {{--<label for="department-{{ $value->id }}">{{ $value->title }}</label>--}}
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <p>展示图</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group ">
                                                <input type="file" id="edit-image" class="dropify" name="image"
                                                       data-default-file=""
                                                       data-height="200px"/>
                                                <input id="image-edit" name="image" type="hidden" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-6" id="image-edit-info">

                                        </div>
                                    </div>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <input type="text" class="form-control" id="url-link-edit" name="url_link"><span
                                            class="highlight"></span> <span class="bar"></span>
                                    <label for='url-link-edit'>广告链接</label>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <input type="text" class="form-control" id="design-cost-edit" name="design_cost"
                                           required><span
                                            class="highlight"></span> <span class="bar"></span>
                                    <label for="design-cost-edit">定制费用（元）</label>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <input type="text" class="form-control" id="time-cost-edit" name="time_cost"
                                           required><span
                                            class="highlight"></span> <span class="bar"></span>
                                    <label for="time-cost-edit">每次点击收费（元）</label>
                                </div>
                                <div class="form-group m-b-40 m-t-10">
                                    <p>备注</p>
                                    <textarea id="explain-edit" name="explain" cols="80" rows="5"></textarea>
                                </div>
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                                </button>
                                                {!! csrf_field() !!}
                                                <button type="submit" class="btn btn-success" id="btn-edit"><i
                                                            class="fa fa-check"></i> 保存
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-wrapper collapse in" aria-expanded="true">
            <div class="panel-body">
                <form action="#">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">广告标题</label>
                                    <input type="text" class="column_filter form-control"
                                           data-column="0"
                                           placeholder="广告标题">
                                </div>
                            </div>
                            <div class="col-xs-3 col-md-3">
                                <div class="form-group">
                                    <label for="status">状态</label>
                                    <select class="form-control column_filter"
                                            data-column="1">
                                        <option value="a">全部</option>
                                        @foreach(App\AdList::$StatusDisplay as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-3 col-md-3">
                                <div class="form-group">
                                    <label for="status">公司名称</label>
                                    <select class="form-control column_filter"
                                            data-column="2">
                                        <option value="a">全部</option>
                                        @foreach(App\AdCompanies::select('id','name')->get() as $value)
                                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">创建时间</label>
                                    <div class="example">
                                        <input class="column_filter form-control input-daterange-datepicker" type="text"
                                               data-column="3" name="time"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="white-box">
            <div class="panel-action" style="margin-top: -9px">
                <a class="popup-with-form btn fcbtn btn btn-outline btn-info btn-1c" href="#add-ad">
                    <span>添加广告</span>
                </a>

            </div>
            <div class="table-responsive">
                <table id="example23"
                       class="display nowrap table table-striped table-bordered table-hover order-column my-table "
                       cellspacing="0" width="100%" data-url="{{ url(request()->getUri()) }}">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>广告标题</th>
                        <th>所属公司</th>
                        <th>广告类型</th>
                        <th>广告图片</th>
                        <th>广告链接</th>
                        <th>定制费用</th>
                        <th>每次点击收费</th>
                        {{--<th>点击次数</th>--}}
                        <th>说明</th>
                        <th>状态</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @parent
    <script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>

    <script>
        $('.input-daterange-datepicker').daterangepicker({});
    </script>
    <script src="{{ asset('js/myself.js') }}"></script>

    <script>
        //删除
        obj.on('click', '.btn-del', function () {
            var id = $(this).data('id');
            var _this = $(this);
            swal({
                    title: "",
                    text: "确定删除么？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/ad/ad/del/' + id,
                        type: 'POST',
                        success: function (data) {
                            if (data.status !== 1) {
                                swal(data.message);
                            } else {
                                swal(data.message, '', 'success');
                                $('.confirm').click(function () {
                                    $('.del-' + id).text('已删除');
                                    _this.parent().text('');
                                });
                            }
                        }
                    })
                }
            );
        });


        $('#add-ad').submit(function (e) {
            e.preventDefault();
            var title = $("#title").val();
            var company_id = $("#company-id").val();
            var department_id = $("#department").val();
            var type = $("#type").val();
            var url_link = $("#url-link").val();
            var design_cost = $("#design-cost").val();
            var time_cost = $("#time-cost").val();
            var explain = $("#explain").val();
            var image = document.getElementById("image").files;
            if (type === 3 && !department_id) {
                swal('请选择科室');
                return false;
            }
            if (!image.length || ((image[0].type).indexOf("image/") === -1)) {
                swal('图片呢？');
                return false;
            }
            image = picajax(image[0]);
            swal({
                    title: "",
                    text: "确定添加吗？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        type: "POST",
                        url: '/ad/ad/publish',
                        data: {
                            title: title,
                            company_id: company_id,
                            department_id: department_id,
                            type: type,
                            url_link: url_link,
                            design_cost: design_cost,
                            time_cost: time_cost,
                            image: image,
                            explain: explain
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        error: function (err) {
                            for (var j in err.responseJSON) {
                                err.responseJSON[j].forEach(function (item, index) {
                                    swal(item);
                                })
                            }
                        },
                        success: function (data) {
                            if (data.status === 1) {
                                swal(data.message, '', 'success');
                                $('.confirm').click(function () {
                                    location.reload();
                                });
                            } else {
                                swal(data.message);
                            }
                        }
                    });
                }
            );
        });


        function edit(sid) {
            $.ajax({
                type: "POST",
                url: '/ad/ad/info/' + sid,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                error: function (err) {
                    for (var j in err.responseJSON) {
                        err.responseJSON[j].forEach(function (item, index) {
                            swal(item);
                        })
                    }
                },
                success: function (data) {
                    if (data.status === 1) {
                        $("#id-edit").val(sid);
                        $("#title-edit").val(data.message.title);
                        $("#company-id-edit").val(data.message.company_id);
                        $("#type-edit").val(data.message.type);
                        $("#url-link-edit").val(data.message.url_link);
                        $("#design-cost-edit").val(data.message.design_cost);
                        $("#time-cost-edit").val(data.message.time_cost);
                        $("#explain-edit").val(data.message.explain);
                        $("#image-edit").val(data.message.image);
                        $("#image-edit-info").html("<img width='100%' src= '" + data.message.image + "'/>");
                        var l = data.message.department_id.length;
                        if (l > 0) {
                            for (var i = 0; i < l; i++) {
                                // console.log($("#department-" + data.message.department_id[i]));
                                $("#department-" + data.message.department_id[i]).attr('checked', 'true').parent().addClass('checked')
                            }
                        }
                    } else {
                        swal(data.message, '', 'success');
                        $('.confirm').click(function () {
                            location.reload();
                        });
                    }
                }
            });
        }


        $('#btn-edit').click(function (e) {
            e.preventDefault();
            var id = $("#id-edit").val();
            var title = $("#title-edit").val();
            var company_id = $("#company-id-edit").val();
            var type = $("#type-edit").val();
            var url_link = $("#url-link-edit").val();
            var design_cost = $("#design-cost-edit").val();
            var time_cost = $("#time-cost-edit").val();
            var explain = $("#explain-edit").val();
            var image = document.getElementById("edit-image").files;

            //复选框
            var department_id = [];
            var checks = document.getElementsByClassName("departments");
            for (var i = 0; i < checks.length; i++) {
                var _this = checks[i];
                if (_this.checked === true) {
                    department_id[i] = _this.value;
                }
            }
            if (type === 3 && !department_id.length) {
                swal('请选择科室');
                return false;
            }
            if (!image.length || ((image[0].type).indexOf("image/") === -1)) {
                image = $("#image-edit").val();
            } else {
                image = picajax(image[0]);
            }
            swal({
                    title: "",
                    text: "确定修改吗？",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的",
                    closeOnConfirm: false
                },
                function () {
                    $.ajax({
                        type: "POST",
                        url: '/ad/ad/modify/' + id,
                        data: {
                            title: title,
                            company_id: company_id,
                            department_id: department_id,
                            type: type,
                            url_link: url_link,
                            design_cost: design_cost,
                            time_cost: time_cost,
                            image: image,
                            explain: explain
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        error: function (err) {
                            for (var j in err.responseJSON) {
                                err.responseJSON[j].forEach(function (item, index) {
                                    swal(item);
                                })
                            }
                        },
                        success: function (data) {
                            if (data.status === 1) {
                                swal(data.message, '', 'success');
                                $('.confirm').click(function () {
                                    location.reload();
                                });
                            } else {
                                swal(data.message);
                            }
                        }
                    });
                }
            );
        });

    </script>
@endsection